{namespace turtlepage}

/**
 * This is a Closure Template.  Build with:
 * java -jar ../_soy/SoyToJsSrcCompiler.jar --outputPathFormat template.js --srcs template.soy
 */

/**
 * Web page structure.
 */
{template .start}
  <table width="100%" height="100%">
    <tr>
      <td width="410" valign="top">
        <h1><a href="http://blockly.googlecode.com/">Blockly</a> &gt;{sp}
            <a href="../index.html">Apps</a> &gt; {$ij.MSG.title}</h1>
<!--Temp disabling of levels.
        <p class="levelLine">{$ij.MSG.level}: &nbsp;
          {for $i in range(1, $ij.maxLevel + 1)}
            {if $i == $ij.level}
              <span class="tab" id="selected">{$i}</span>
            {else}
              <a class="tab" href="?level={$i}">{$i}</a>
            {/if}
          {/for}
        </p>

        <div id="bubble">
          <div id="hint">{$ij.MSG.hints[$ij.level]}</div>
          <div id="capacity"></div>
        </div>
-->
        <div>
          <canvas id="scratch" width="400" height="400" style="display: none"></canvas>
          <canvas id="display" width="400" height="400"></canvas>
        </div>
        <table style="padding-top: 1em;">
          <tr>
            <td style="width: 190px; text-align: center">
              <script type="text/javascript" src="../slider.js"></script>
              <svg
                 id="slider"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:svg="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink"
                 version="1.1"
                 width="150"
                 height="50">
                <!-- Slow icon. -->
                <clipPath id="slowClipPath">
                  <rect width=26 height=12 x=5 y=14 />
                </clipPath>
                <image xlink:href="icons.png" height=42 width=84 x=-21 y=-10
                    clip-path="url(#slowClipPath)" />
                <!-- Fast icon. -->
                <clipPath id="fastClipPath">
                  <rect width=26 height=16 x=120 y=10 />
                </clipPath>
                <image xlink:href="icons.png" height=42 width=84 x=120 y=-11
                    clip-path="url(#fastClipPath)" />
              </svg>
            </td>
            <td style="width: 15px;">
              <img id="spinner" style="visibility: hidden;" src="loading.gif" height=15 width=15>
            </td>
            <td style="width: 190px; text-align: center">
              <button id="runButton" class="launch" onclick="Turtle.runButtonClick();">
                {$ij.MSG.runProgram}
              </button>
              <button id="resetButton" class="launch" onclick="Turtle.resetButtonClick();" style="display: none">
                {$ij.MSG.resetProgram}
              </button>
            </td>
          </tr>
        </table>

        <div id="toolbarDiv">
          <button title="{$ij.MSG.codeTooltip}" onclick="Turtle.showCode();">
            <img src='../../media/1x1.gif' class="code">
          </button>
          <button id="linkButton" title="{$ij.MSG.linkTooltip}" onclick="BlocklyStorage.link();">
            <img src='../../media/1x1.gif' class="link">
          </button>
        </div>
      </td>
      <td valign="top">
        <script type="text/javascript" src="../../blockly_compressed.js"></script>
        <script type="text/javascript" src="../../generators/javascript.js"></script>
        <script type="text/javascript" src="../../generators/javascript/control.js"></script>
        <script type="text/javascript" src="../../generators/javascript/logic.js"></script>
        <script type="text/javascript" src="../../generators/javascript/math.js"></script>
        <script type="text/javascript" src="../../generators/javascript/lists.js"></script>
        <script type="text/javascript" src="../../generators/javascript/colour.js"></script>
        <script type="text/javascript" src="../../generators/javascript/variables.js"></script>
        <script type="text/javascript" src="../../generators/javascript/procedures.js"></script>
        <script type="text/javascript" src="../common.js"></script>
        <script type="text/javascript">
          Blockly.Apps.loadLanguageScripts(languageSrc);
        </script>
        <script type="text/javascript" src="blocks.js"></script>
        {call .toolbox /}
        <div id="blockly"></div>
      </td>
    </tr>
  </table>
{/template}

/**
 * Toolbox.
 */
{template .toolbox}
  <xml id="toolbox" style="display: none">
    {if $ij.level == 1}
      <block type="draw_move_forward_100"></block>
      <block type="draw_turn_right_90"></block>
    {elseif $ij.level == 2}
      <block type="draw_move_forward_100"></block>
      <block type="draw_turn_right_90"></block>
      <block type="controls_repeat">
        <title name="TIMES">4</title>
      </block>
    {else}
      <category name="{$ij.MSG.catTurtle}">
        <block type="draw_move">
          <value name="VALUE">
            <block type="math_number">
              <title name="NUM">10</title>
            </block>
          </value>
        </block>
        <block type="draw_turn">
          <value name="VALUE">
            <block type="math_number">
              <title name="NUM">90</title>
            </block>
          </value>
        </block>
        <block type="draw_width">
          <value name="WIDTH">
            <block type="math_number">
              <title name="NUM">1</title>
            </block>
          </value>
        </block>
        <block type="draw_pen"></block>
        <block type="turtle_visibility"></block>
      </category>
      <category name="{$ij.MSG.catColour}">
        <block type="draw_colour">
          <value name="COLOUR">
            <block type="colour_picker"></block>
          </value>
        </block>
        <block type="colour_picker"></block>
        <block type="colour_rgb"></block>
        <block type="colour_blend"></block>
      </category>
      <category name="{$ij.MSG.catControl}">
        <block type="controls_if"></block>
        <block type="controls_repeat"></block>
        <block type="controls_whileUntil"></block>
        <block type="controls_for">
          <value name="FROM">
            <block type="math_number">
              <title name="NUM">1</title>
            </block>
          </value>
          <value name="TO">
            <block type="math_number">
              <title name="NUM">10</title>
            </block>
          </value>
        </block>
        <block type="controls_forEach"></block>
        <block type="controls_flow_statements"></block>
      </category>
      <category name="{$ij.MSG.catLogic}">
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_negate"></block>
        <block type="logic_boolean"></block>
        <block type="logic_null"></block>
        <block type="logic_ternary"></block>
      </category>
      <category name="{$ij.MSG.catMath}">
        <block type="math_number"></block>
        <block type="math_arithmetic"></block>
        <block type="math_single"></block>
        <block type="math_trig"></block>
        <block type="math_constant"></block>
        <block type="math_number_property"></block>
        <block type="math_change">
          <value name="DELTA">
            <block type="math_number">
              <title name="NUM">1</title>
            </block>
          </value>
        </block>
        <block type="math_round"></block>
        <block type="math_on_list"></block>
        <block type="math_modulo"></block>
        <block type="math_constrain">
          <value name="LOW">
            <block type="math_number">
              <title name="NUM">1</title>
            </block>
          </value>
          <value name="HIGH">
            <block type="math_number">
              <title name="NUM">100</title>
            </block>
          </value>
        </block>
        <block type="math_random_int">
          <value name="FROM">
            <block type="math_number">
              <title name="NUM">1</title>
            </block>
          </value>
          <value name="TO">
            <block type="math_number">
              <title name="NUM">100</title>
            </block>
          </value>
        </block>
        <block type="math_random_float"></block>
      </category>
      <category name="{$ij.MSG.catLists}">
        <block type="lists_create_empty"></block>
        <block type="lists_create_with"></block>
        <block type="lists_repeat">
          <value name="NUM">
            <block type="math_number">
              <title name="NUM">5</title>
            </block>
          </value>
        </block>
        <block type="lists_length"></block>
        <block type="lists_isEmpty"></block>
        <block type="lists_indexOf">
          <value name="VALUE">
            <block type="variables_get">
              <title name="VAR">list</title>
            </block>
          </value>
        </block>
        <block type="lists_getIndex">
          <value name="VALUE">
            <block type="variables_get">
              <title name="VAR">list</title>
            </block>
          </value>
        </block>
        <block type="lists_setIndex">
          <value name="LIST">
            <block type="variables_get">
              <title name="VAR">list</title>
            </block>
          </value>
        </block>
        <block type="lists_getSublist">
          <value name="LIST">
            <block type="variables_get">
              <title name="VAR">list</title>
            </block>
          </value>
        </block>
      </category>
      <category name="{$ij.MSG.catVariables}" custom="VARIABLE"></category>
      <category name="{$ij.MSG.catProcedures}" custom="PROCEDURE"></category>
    {/if}
  </xml>
{/template}
